<!--
 * @Date: 2022-05-31 15:07:56
 * @Author: 陶子
 * @LastEditTime: 2022-07-07 15:32:56
 * @FilePath: \jk_one-stop_pc\src\views\workManagement\reportForm\materialComponents\UseCollect.vue
 * @pageName: 这是--(用料汇总)--页面
-->
<template>
  <div>
    <div class="topBox">
      <div class="btnBox">
        <a-button @click="showColumn" icon="unordered-list" style="margin-right: 10px"> 设置列 </a-button>
        <div style="display:flex;">
          <!-- <PubImport style='margin-right:20px;' /> -->
          <!-- <PubExport :exportUrl='exportUrl' :columns="columns" tableName='用料统计' :propForm='formatData()' :selectedRows='chooseArr' :sortForm='sortForm' tabName='用料汇总' /> -->
        </div>
      </div>
      <div>
      </div>
    </div>
    <a-table :key="tableKey" row-key="id" :columns="columns" :data-source="tableData" :pagination="false" :scroll="{ x: computedX,y:'calc(100vh - 495px)' }"
      :row-selection="{ selectedRowKeys: selectedRowKeys,columnTitle:' ',columnWidth:35, onChange: onSelectChange,}" @change="tableChange" :components="drag(columns, 'USECOLLECT')">
      <!-- 输入框搜索 -->
      <div slot="searchDropdown" slot-scope="{confirm, clearFilters, column }" class='searchWorkOreder'>
        <a-input :placeholder='checkPlaceholder(column.dataIndex)' v-model="tableFilterForm[column.dataIndex]" style="width: 188px;display: block;" />
        <a-button type="primary" style="width: 80px; margin-left: 20px;display: block;" @click="() => pubSearch(confirm, column.dataIndex,clearFilters)">
          搜索
        </a-button>
      </div>
      <a-icon slot="searchIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
    </a-table>
    <div class="uni-card resetPadding" :style="{position: 'fixed', bottom:0,right:0,zIndex:2,left:collapsed?'79px':'208px', background: '#fff',paddingLeft:'43px'} ">
      <div style="display: inline-block">
        <a-checkbox :indeterminate="listIndeterminate" :checked="listCheckAll" @change="onCheckAllChange"></a-checkbox>
        <span>
          {{ `已选 ${selectedRowKeys.length}/${total} 项` }} <span class='pubColor' @click="clearArr" style="margin: 0 10px">清空</span>
        </span>
      </div>
      <div style="display: inline-block; float: right">
        <a-pagination :total="total" v-model="current" :page-size-options="pageSizeOptions" :page-size="pageSize" @change="onChangePage"
          @showSizeChange="onShowSizeChange" show-quick-jumper show-size-changer />
      </div>
    </div>
    <SetColumn columnName='设置列' ref="SetColumn" v-if="showSetColumn" @sureBtn='sureBtn' @cancelBtn='showSetColumn=false' />
  </div>
</template>
<script>
import { getUseMaterialsStatisticsGoodsDimension } from '@/api/productOrder'
import { columns, allColumn } from './collectColumns.js'
import PubExport from '@/components/pubBtn/PubExport.vue'
// import PubImport from '@/components/pubBtn/PubImport.vue'
import { getNewColumns, objArrFilter } from '@/utils/util'
import SetColumn from '@/pubComponent/SetColumn.vue'
import { mapState } from 'vuex'
import moment from 'moment'
import tableDragResize from '@/mixins/tableDragResize'
export default {
  components: {
    SetColumn,
    PubExport,
    // PubImport
  },
  mixins: [tableDragResize],
  props: ['realFilterForm'],
  data() {
    return {
      columns,
      tableData: [],
      selectedRowKeys: [],
      chooseArr: [],
      //全选按钮
      listIndeterminate: false,
      listCheckAll: false,
      current: 1,
      total: 0,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      showSetColumn: false,
      // 抽屉数据
      tableFilterForm: {},
      sortForm: {
        sortType: '',
        sortColumn: '',
      },
      allRequestList: [],
      exportUrl: '/mess/messProductReport/exportUseMaterialsStatisticsGoodsDimensionXls',
      tableKey: 1.9
    }
  },
  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsed,
    }),
    computedX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width)
      }
      
      return xnum
    },
  },
  watch: {
    realFilterForm: {
      handler(newValue) {
        this.tableFilterForm = JSON.parse(JSON.stringify(newValue))
        let params = this.formatData()
        this.current = 1
        let obj = {
          pageNo: this.current,
          pageSize: this.pageSize,
          ...params,
        }
        this.getData(obj)
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    let oldValue = localStorage.getItem(this.BUSI_CONST.Entity.USECOLLECT)
    this.columns = getNewColumns(allColumn, JSON.parse(oldValue), [], this.columns)
  },
  methods: {
    getData(obj, secondParams) {
      let params = {
        ...obj,
        ...this.sortForm,
      }
      getUseMaterialsStatisticsGoodsDimension(params).then((res) => {
        if (res.success) {
          if (res.result.total) {
            this.total = res.result.total
          } else {
            this.total = 0
          }
          let copyArr = JSON.parse(JSON.stringify(res.result.records))
          for (let item of copyArr) {
            for (let each in item) {
              if (!item[each] && item[each] != 0) {
                item[each] = '-'
              }
            }
          }
          this.tableData = copyArr
          this.allRequestList = this.allRequestList.concat(this.tableData)
          this.allRequestList = objArrFilter(this.allRequestList)
          if (secondParams) {
            this.checkBoxStatus()
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },

    showColumn() {
      this.showSetColumn = true
      this.$nextTick(() => {
        let noAction = true
        this.$refs.SetColumn.paramsData(allColumn, this.BUSI_CONST.Entity.USECOLLECT, columns, noAction)
      })
    },
    sureBtn(emitArr) {
      this.columns = getNewColumns(allColumn, emitArr, [])
      localStorage.setItem(this.BUSI_CONST.Entity.USECOLLECT, JSON.stringify(emitArr))
      this.tableKey += 1
    },
    checkPlaceholder(dataIndex) {
      let str = ''
      switch (dataIndex) {
        case 'materialCode':
          str = '请输入用料编号'
          break
        case 'materialName':
          str = '请输入用料名称'
          break
        case 'goodsSpec':
          str = '请输入规格'
          break
      }
      return str
    },
    pubSearch(confirm, dataIndex, clearFilters) {
      confirm() //用来关闭搜索弹窗
      // clearFilters() //用来重置搜索内容
      // console.log('这都是啥11：', confirm)
      // console.log('这都是啥22：', dataIndex)
      this.$emit('updataQuqery', this.tableFilterForm)
    },
    // table
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      console.log('看看这是啥33：', sorter)
      let params = this.formatData()
      if (sorter.order) {
        let sortType = ''
        if (sorter.order == 'ascend') {
          sortType = 'ASC'
        } else {
          sortType = 'DESC'
        }
        this.sortForm.sortType = sortType
        this.sortForm.sortColumn = 'onlyReceivedNum'
        let obj = {
          pageNo: this.current,
          pageSize: this.pageSize,
          ...params,
        }
        this.getData(obj)
      } else {
        this.sortForm.sortType = ''
        this.sortForm.sortColumn = ''
        let obj = {
          pageNo: this.current,
          pageSize: this.pageSize,
          ...params,
        }
        this.getData(obj)
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('第一个参数是；', selectedRowKeys)
      // console.log('第second个参数是；', selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.chooseArr = []
      for (let tag of selectedRowKeys) {
        for (let item of this.allRequestList) {
          if (tag == item.id) {
            this.chooseArr.push(item)
          }
        }
      }
      this.checkBoxStatus()
    },
    checkBoxStatus() {
      if (this.selectedRowKeys.length == 0) {
        this.listIndeterminate = false
        this.listCheckAll = false
      } else {
        let tableIds = []
        for (let item of this.tableData) {
          tableIds.push(item.id)
        }
        let checkValue = this.isInclude(tableIds, this.selectedRowKeys)
        if (checkValue) {
          this.listIndeterminate = false
          this.listCheckAll = true
        } else {
          this.listIndeterminate = true
          this.listCheckAll = false
        }
      }
    },
    isInclude(aa, bb) {
      return aa.every((item) => {
        return bb.some((sub) => {
          return sub === item
        })
      })
    },
    // 全选
    onCheckAllChange(e) {
      if (e.target.checked) {
        for (let item of this.tableData) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.id
          })
          this.chooseArr = this.chooseArr.filter((every) => {
            return every.id != item.id
          })
          this.selectedRowKeys.push(item.id)
          this.chooseArr.push(item)
        }
      } else {
        for (let item of this.tableData) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.id
          })
          this.chooseArr = this.chooseArr.filter((every) => {
            return every.id != item.id
          })
        }
      }
      this.checkBoxStatus()
    },
    clearArr(type) {
      this.selectedRowKeys = []
      this.chooseArr = []
      if (type) {
        let params = this.formatData()
        let obj = {
          pageNo: this.current,
          pageSize: this.pageSize,
          ...params,
        }
        let secondParams = true
        this.getData(obj, secondParams)
      } else {
        this.checkBoxStatus()
      }
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      let params = this.formatData()
      let obj = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...params,
      }
      let secondParams = true
      this.getData(obj, secondParams)
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.current = 1
      let params = this.formatData()
      let obj = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...params,
      }
      let secondParams = true
      this.getData(obj, secondParams)
    },

    // 筛选传参数据
    formatData() {
      let copyForm = JSON.parse(JSON.stringify(this.tableFilterForm))
      let params = {}
      params.orderCode = copyForm.orderCode
      params.goodsCode = copyForm.goodsCode
      params.goodsSpec = copyForm.goodsSpec
      params.goodsName = copyForm.goodsName
      params.materialCode = copyForm.materialCode
      params.materialName = copyForm.materialName
      if (copyForm.happenDate && copyForm.happenDate.length > 0) {
        params.happenTimeStart = moment(copyForm.happenDate[0]).format('YYYY-MM-DD') + ' ' + '00:00:00'
        params.happenTimeEnd = moment(copyForm.happenDate[1]).format('YYYY-MM-DD') + ' ' + '23:59:59'
      } else {
        params.planStartTimeBegin = ''
        params.planStartTimeEnd = ''
      }

      return params
    },
  },
}
</script>
<style scoped lang='less'>
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}
.topBox {
  .flex(space-between, center);
  margin-bottom: 16px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}

.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}
.filter-num {
  color: @normalFont;
}
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.margin-btn {
  margin-right: @distance5;
}
.filter-tag {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: @fontSize1;
  line-height: @fontSize1;
  max-width: 100%;
  background: @greyBg;
  color: @titFont;
  cursor: pointer;
  .tag-text {
    display: inline-block;
    padding-right: 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .anticon-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}
.tag-wrap:nth-of-type(n + 2) {
  margin-top: 10px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.modalTopBox {
  .flex(flex-start, center);
  margin-bottom: 8px;
  span {
    margin-left: 16px;
    display: block;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
  }
}

.cardTwo {
  width: 100%;
}
div.listBox {
  height: calc(100% - 77px);
  margin-top: 10px;
  overflow-y: auto;
  div.itemList {
    .flex(space-between, center);
    height: 34px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 16px;

    div.itemLeft {
      font-size: 14px;
      color: #444444;
    }

    div.itemRight {
      font-size: 14px;
      color: #444444;
    }
    &:nth-child(n + 2) {
      div.itemLeft {
        font-size: 14px;
        color: #444444;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 130px;
      }

      div.itemRight {
        font-size: 14px;
        color: #444444;
      }
    }
  }

  div.haveColor {
    .flex(space-between, center);
    height: 34px;
    background: #e3f2ff;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 16px;
    div.itemLeft {
      font-size: 14px;
      color: #1890ff;
    }

    div.itemRight {
      font-size: 14px;
      color: #1890ff;
    }
    &:nth-child(n + 2) {
      div.itemLeft {
        font-size: 14px;
        color: #1890ff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 130px;
      }

      div.itemRight {
        font-size: 14px;
        color: #1890ff;
      }
    }
  }
}
a {
  margin: 0;
}
.btnBox {
  width: 100%;
  .flex(space-between, center);
}
</style>
